<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>jQuery timePicker</title>
 <style type="text/css" media="all">@import "timePicker.css";</style>
  <style type="text/css">
  div {
    margin-top:3em;
  }
  input {
  margin:0;
  padding:0;
  }
  body {
    background: #eee;
  }
  pre {
    background:#fff;
    border:1px solid #ddd;
    padding:4px;
  }
  .error {
    border:1px solid red;
  }
  </style>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript" src="jquery.timePicker.js"></script>
  <script type="text/javascript">
  jQuery(function() {
    // Default.
    $("#time1").timePicker();
    // 02.00 AM - 03.30 PM, 15 minutes steps.
    $("#time2").timePicker({
  startTime: "02.00",  // Using string. Can take string or Date object.
  endTime: new Date(0, 0, 0, 15, 30, 0),  // Using Date object.
  show24Hours: false,
  separator:'.',
  step: 15});
    
    // An example how the two helper functions can be used to achieve 
    // advanced functionality.
    // - Linking: When changing the first input the second input is updated and the
    //   duration is kept.
    // - Validation: If the second input has a time earlier than the firs input,
    //   an error class is added.
    
    // Use default settings
    $("#time3, #time4").timePicker();
        
    // Store time used by duration.
    var oldTime = $.timePicker("#time3").getTime();
    
    // Keep the duration between the two inputs.
    $("#time3").change(function() {
      if ($("#time4").val()) { // Only update when second input has a value.
        // Calculate duration.
        var duration = ($.timePicker("#time4").getTime() - oldTime);
        var time = $.timePicker("#time3").getTime();
        // Calculate and update the time in the second input.
        $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
        oldTime = time;
      }
    });
    // Validate.
    $("#time4").change(function() {
      if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
        $(this).addClass("error");
      }
      else {
        $(this).removeClass("error");
      }
    });
    
  });
  </script>
  <script type="text/javascript">
  // Analytics.
  var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-123444-3"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()
  </script>
</head>

<body>
<h1>jQuery timePicker</h1>
<p>A time picker for jQuery inspired by Google Calendar</p>
<p>Get the latest code on Github (the files used on this page might not be the latest): <a href="http://github.com/perifer/timePicker">http://github.com/perifer/timePicker</a>

<div><input type="text" id="time1" size="10" /></div>
<pre><code>// Default.
$("#time1").timePicker();</code></pre>

<div><input type="text" id="time2" size="10" value="12.00 PM"/></div>
<pre><code>// 02.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
  startTime: "02.00", // Using string. Can take string or Date object.
  endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
  show24Hours: false,
  separator: '.',
  step: 15});</code></pre>

<div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div>
<pre><code>// An example how the two helper functions can be used to achieve 
// advanced functionality.
// - Linking: When changing the first input the second input is updated and the
//   duration is kept.
// - Validation: If the second input has a time earlier than the firs input,
//   an error class is added.

// Use default settings
$("#time3, #time4").timePicker();
    
// Store time used by duration.
var oldTime = $.timePicker("#time3").getTime();

// Keep the duration between the two inputs.
$("#time3").change(function() {
  if ($("#time4").val()) { // Only update when second input has a value.
    // Calculate duration.
    var duration = ($.timePicker("#time4").getTime() - oldTime);
    var time = $.timePicker("#time3").getTime();
    // Calculate and update the time in the second input.
    $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
    oldTime = time;
  }
});
// Validate.
$("#time4").change(function() {
  if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
    $(this).addClass("error");
  }
  else {
    $(this).removeClass("error");
  }
});</code></pre>

</body>
</html>
